import React, { useState } from 'react';
import './ImageOverlay.css'; // 导入样式文件

interface OverlayPageProps {
  mainContent: React.ReactNode;
  overlayContent: React.ReactNode;
}

const OverlayPage: React.FC<OverlayPageProps> = ({ mainContent, overlayContent }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className="page-container"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="main-content">{mainContent}</div>
      {isHovered && (
        <div className="overlay">
          {overlayContent}
        </div>
      )}
    </div>
  );
};

export default OverlayPage;